<template>
  <div class="row">
    <sy-button type="primary" @click="visible2=true">自定义Dialog</sy-button>
    <sy-dialog title="这是一个提示的title" width="50%" top="100px" :visible.sync="visible2">
      <sy-form :model="model" label-width="100px">
        <sy-form-item label="用户名">
          <sy-input placeholder="请输入用户名" v-model="model.username" clearable></sy-input>
        </sy-form-item>
        <sy-form-item label="密码">
          <sy-input placeholder="请输入密码" v-model="model.password" type="password" show-password></sy-input>
        </sy-form-item>
        <sy-form-item label="选择">
          <sy-switch v-model="model.active"></sy-switch>
        </sy-form-item>
      </sy-form>
      <template v-slot:footer>
        <sy-button @click="visible2=false">取消</sy-button>
        <sy-button type="primary" @click="visible2=false">确定</sy-button>
      </template>
    </sy-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible2: false,
      model: { username: 'Hello', password: '123', active: true }
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}
.sy-button {
  margin-right: 20px;
}
.sy-input {
  width: 200px;
}
</style>
